<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/app}">
<head>
    <title>留言板列表</title>
</head>
<body>
<div class="container" layout:fragment="content">
    <!-- Topbar -->
    <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

        <!-- Sidebar Toggle (Topbar) -->
        <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
            <i class="fa fa-bars"></i>
        </button>

        <!-- Topbar Navbar -->
        <ul class="navbar-nav ml-auto">

            <!-- Nav Item - Search Dropdown (Visible Only XS) -->
            <li class="nav-item dropdown no-arrow d-sm-none">
            </li>

            <!-- Nav Item - Alerts -->
            <li class="nav-item dropdown no-arrow mx-1">
                <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-bell fa-fw"></i>
                    <!-- Counter - Alerts -->
                    <span class="badge badge-danger badge-counter">3+</span>
                </a>
                <!-- Dropdown - Alerts -->
                <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown">
                    <h6 class="dropdown-header">
                        Alerts Center
                    </h6>
                    <a class="dropdown-item d-flex align-items-center" href="#">
                        <div class="mr-3">
                            <div class="icon-circle bg-primary">
                                <i class="fas fa-file-alt text-white"></i>
                            </div>
                        </div>
                        <div>
                            <div class="small text-gray-500">December 12, 2019</div>
                            <span class="font-weight-bold">A new monthly report is ready to download!</span>
                        </div>
                    </a>
                    <a class="dropdown-item d-flex align-items-center" href="#">
                        <div class="mr-3">
                            <div class="icon-circle bg-success">
                                <i class="fas fa-donate text-white"></i>
                            </div>
                        </div>
                        <div>
                            <div class="small text-gray-500">December 7, 2019</div>
                            $290.29 has been deposited into your account!
                        </div>
                    </a>
                    <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
                </div>
            </li>

            <div class="topbar-divider d-none d-sm-block"></div>

            <!-- Nav Item - User Information -->
            <li class="nav-item dropdown no-arrow">
                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="mr-2 d-none d-lg-inline text-gray-600 small" th:text="${session.user.getUserName()}"></span>
                    <img class="img-profile rounded-circle" th:src="@{~/img/avatar.jpg}">
                </a>
                <!-- Dropdown - User Information -->
                <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                        <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                        注销
                    </a>
                </div>
            </li>

        </ul>

    </nav>
    <!-- End of Topbar -->

    <!-- Outer Row -->
    <div class="container-fluid">

        <p style="color: red;text-align: center;font-size: 28px;" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
        <!-- create post -->
        <h5>发表留言</h5>
        <div class="card shadow mb-12" style="border-bottom: none !important; position: relative">
            <form th:action="@{/message}" th:object="${messageDto}"  method="POST">
                <textarea rows="4" class="form-control" placeholder="输入留言的内容" th:field="*{message}" required></textarea>
                <input class="btn btn-primary text-right pull-right" type="submit" value="发表"
                       style="position:absolute;right: 0px; bottom: -45px;resize: vertical" />
            </form>
        </div>

        <!-- posts list -->
        <h4 style="margin-top: 50px;">留言列表</h4>

        <!-- Dropdown Card Example -->
        <div class="card shadow mb-12" th:each="message:${messages.content}">
            <!-- Card Header - Dropdown -->
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary" th:text="${message.user.userName} +' 发表于 ' + ${#dates.format(message.createdAt, 'yyyy-MM-dd HH:mm')}"></h6>
                <div class="dropdown no-arrow" th:if="${message.user.id} == ${session.user.getId()}">
                    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                         aria-labelledby="dropdownMenuLink">
                        <div class="dropdown-header">操作:</div>
                        <span class="dropdown-item editButton" data-toggle="modal"
                                th:attr="data-message-id=${message.id},
                                    data-page=${messages.pageNum},
                                    data-message-content=${message.message}"
                        >编辑</span>
                        <span class="dropdown-item del-msg" th:onclick="'delMsg('+${message.id}+')'">删除</span>
                        <form th:id="'d-from-'+${message.id}" th:action="@{'/message/'+${message.id}}" th:method="delete"></form>
                    </div>
                </div>
            </div>
            <!-- Card Body -->
            <div class="card-body" >
                <pre th:text="${message.message}" style="white-space: pre-wrap;word-wrap: break-word;"></pre>
            </div>
        </div>

        
        <div style="text-align: center; margin-top: 40px;">
            <span>总共 <b th:text="${messages.totalSize}"></b>条, 共<b th:text="${messages.totalPages}"></b> 页</span>
            <a th:href="@{/dashboard(page=${messages.pageNum} - 1)}" style="padding: 60px;" th:if="${messages.pageNum} > 1">上一页</a>
            <span>当前第 <b th:text="${messages.pageNum}"></b> 页</span>
            <a th:href="@{/dashboard(page=${messages.pageNum} + 1)}" style="padding: 60px;" th:if="${messages.pageNum} < ${messages.totalPages}">下一页</a>
        </div>

        <!-- message edit modal -->
        <div id="messageEditModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="container-fluid">
                            <form id="editForm" th:action="@{/message}" th:method="put" th:object="${messageDto}">
                                <input id="page" hidden="true" type="text" th:field="*{page}"/>
                                <textarea id="messageContent" th:field="*{message}"  class="form-control" rows="5" style="resize: vertical" required></textarea>
                                <div class="modal-footer">
                                    <button class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button class="btn btn-primary" type="submit">保存</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Logout Modal-->
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">确定退出吗?</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">选择 "确定"，如果你准备好了结束当前会话</div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                    <a class="btn btn-primary" th:href="@{/logout}">确定</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>